<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>使用getAttribute读取节点的属性值</title>
    <style type="text/css">
      body {
        margin: 0px auto;
        font-size: 12px;
        line-height: 20px;
        background-color: cornsilk;
      }
      #like {
        width: 70%;
        border-radius: 10px;
        background: url(./images/bg.png) no-repeat left bottom;
        background-color: rgb(252, 247, 247);
        padding-top: 10px;
        padding-left: 200px;
        margin: 10px auto;
        border: 1px dashed rgb(252, 199, 199);
      }
      h1 {
        color: rgb(0, 128, 96);
        font-size: 24px;
        margin-top: 20px;
      }
      #like button,
      #fruitPic button {
        background-color: rgb(0, 128, 96);
        color: #fff;
        border: 0;
        width: 150px;
        height: 30px;
        font-size: 14px;
        margin: 10px 10px 20px 20px;
      }
      input {
        margin-top: 5px;
      }
      ul li {
        list-style: none;
        font-size: 14px;
      }
      #fruitPic {
        width: 70%;
        border-radius: 10px;
        background-color: rgb(232, 250, 245);
        padding-top: 10px;
        padding-left: 200px;
        margin: 10px auto;
        border: 1px dashed rgb(27, 167, 132);
      }
      img {
        border: 0px;
        margin-left: 50px;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div id="like">
      <h1 id="love">选择你喜欢的水果：</h1>
      <ul>
        <li><input type="checkbox" />苹果</li>
        <li><input type="checkbox" />香蕉</li>
        <li><input type="checkbox" />葡萄</li>
        <li><input type="checkbox" />香梨</li>
        <li><input type="checkbox" />西瓜</li>
      </ul>
      <input type="checkbox" id="check" />全选
      <button id="favourite">显示你喜欢的水果</button>
    </div>
    <div id="fruitPic">
      <img src="images/fruit.jpg" alt="水果图片" id="fruit" />
      <br />
      <button id="show">显示图片路径</button>
      <button id="change">改变图片</button>
    </div>
    <script>
      // 实现全选反选功能
      document.getElementById("check").onclick = function () {
        // 选取ul中的复选框
        var cks = document
          .querySelector("ul")
          .querySelectorAll("input[type='checkbox']");
        for (var i = 0; i < cks.length; i++) {
          if (cks[i].checked) {
            cks[i].checked = false;
          } else {
            cks[i].checked = true;
          }
        }
      };
      //  实现显示选择水果
      document.querySelector("#favourite").onclick = function () {
        var like = "你喜欢的水果是：";
        var cks = document
          .querySelector("ul")
          .querySelectorAll("input[type='checkbox']");
        for (var i = 0; i < cks.length; i++) {
          if (cks[i].checked) {
            like += "\n" + cks[i].parentNode.innerText;
          }
        }
        alert(like);
      };
      //   显示图片路径
      document.querySelector("#show").onclick = function () {
        alert(document.querySelector("#fruit").getAttribute("src"));
      };
      // 更换图片
      document.querySelector("#change").onclick = function () {
        document
          .querySelector("#fruit")
          .setAttribute("src", "images/grape.jpg");
      };
    </script>
  </body>
</html>
